<template>
  <!-- 新契约工作列表模块-end单 -->
  <div class="fillcontain">
    <!-- 查询表单 -->
    <el-form  :model="searchParams"  ref="ruleForm" label-width="120px"
              class="search_container">
      <el-row>
        <el-col :span="6">
          <el-form-item label="规则组名称" prop="groupName">
            <el-input clearable v-model="searchParams.groupName" placeholder="规则组名称"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="规则组编码" prop="groupIdentify">
            <el-input clearable v-model="searchParams.groupIdentify" placeholder="流程编码"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布人" prop="publishUser">
            <el-input clearable v-model="searchParams.publishUser" placeholder="发布人"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布时间（起）" prop="publishBegDate">
            <el-date-picker type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" clearable v-model="searchParams.publishBegDate" placeholder="发布时间（起）"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="发布时间（止）" prop="publishEndDate">
            <el-date-picker type="datetime" :format="'yyyy-MM-dd HH:mm:ss'" clearable v-model="searchParams.publishEndDate" placeholder="发布时间（起）"></el-date-picker>
          </el-form-item>
        </el-col>
        <el-col :span="6" class="text_center">
          <el-button type="primary" size="mini" icon="el-icon-search" @click="search" ></el-button>
          <el-button type="primary" size="mini" plain icon="el-icon-refresh" @click="resetSearch"></el-button>
        </el-col>
      </el-row>

    </el-form>

    <div class="contain">
      <!-- 操作按钮 -->
      <el-row>
        <el-col :span="24" class="pb15 pt5">
          <el-button type="info" plain size="mini" style="margin-left: 10px;" @click="compareVersion">对比</el-button>
        </el-col>
      </el-row>
      <!-- 查询结果列表 -->
      <div class="table_container">
        <el-table ref="multipleTable" v-loading="loading" :data="tableData" tooltip-effect="dark"
                  highlight-current-row header-cell-class-name="table-header-class"
                  empty-text="无符合查询条件任务"
                  style="width:100%">
          <el-table-column type="selection"></el-table-column>
          <el-table-column property="groupName" label="规则组名称" align='center' show-overflow-tooltip
                           min-width="120"></el-table-column>
          <el-table-column property="groupIdentify" label="规则组编码" align='center' show-overflow-tooltip
                           min-width="80"></el-table-column>
          <el-table-column property="groupVersion" label="规则组版本" align='center' show-overflow-tooltip
                           min-width="80"></el-table-column>
          <el-table-column property="lastUpdateId" label="操作人" align='center' show-overflow-tooltip
                           min-width="100"></el-table-column>
          <el-table-column property="lastUpdateTime" label="操作时间" :formatter="dateFormat" align='center' show-overflow-tooltip
                           min-width="160"></el-table-column>
          <el-table-column property="publishUser" label="发布人" align='center' show-overflow-tooltip
                           min-width="100"></el-table-column>
          <el-table-column property="releaseTime" label="发布时间" :formatter="dateFormat" align='center' show-overflow-tooltip
                           min-width="160"></el-table-column>
          <el-table-column property="" label="操作" align='center' show-overflow-tooltip min-width="120">
            <template slot-scope="scope">
              <el-button type="text" @click="audit(scope.row)">审核</el-button>
              <el-button type="text" @click="showDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row>
          <el-col :span="24">
            <div class="pagination">
              <el-pagination
                background
                v-if='paginations.total > 0'
                :page-sizes="paginations.pageSizes"
                :page-size="paginations.pageSize"
                :layout="paginations.layout"
                :total="paginations.total"
                :current-page='paginations.pageIndex'
                @current-change='handleCurrentChange'
                @size-change='handleSizeChange'>
              </el-pagination>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>


    <!-- 弹窗 -->
    <el-dialog :title="'规则组审核'" :visible.sync="auditVisible" width="60%" center>
      <el-form :model="auditReq"
               ref="nodeForm"
               label-width="120px">
        <el-row>
          <el-col :span="24">
            <el-form-item label="审核状态" prop="auditStatus" >
              <el-radio v-model="auditReq.auditStatus" label="2" @change="auditChangeHandler">通过</el-radio>
              <el-radio v-model="auditReq.auditStatus" label="3" @change="auditChangeHandler">拒绝</el-radio>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="审核意见" prop="auditMsg">
              <el-input  type="textarea" rows="2" clearable v-model="auditReq.auditMsg" placeholder="审核意见"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="auditVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveAudit">保 存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
  import { rulePage,ruleAudit } from '@/api/version/version'
  import constant from '@/api/constant'
  export default {
    components: {},
    data () {
      return {
          loading:false,
        tableData:[],
        searchParams: {
          // 规则组名称
          flowName: '',
          // 操作时间（起）
          flowIdentify: '',
          begTime: '',
          publishUser: '',
          publishBegDate: '',
          publishEndDate: '',
          auditStatus: '1',
          pageSize: '',
          pageNumber: '',
        },
        auditStatus: constant.auditStatus,
        auditReq:{
          version:'',
          identify:'',
          auditStatus:'',
          auditMsg:''
        },
        auditVisible: false,
        paginations: {
          total: 0,        // 总数
          pageIndex: 1,  // 当前位于哪页
          pageSize: 20,   // 1页显示多少条
          pageSizes: [5, 10, 15, 20],  //每页显示多少条
          layout: "total, sizes, prev, pager, next, jumper"   // 翻页属性
        },
      }
    },
    created () {
      this.getList()
    },
    activated () {
      this.getList()
    },
    mounted () {

    },
    methods: {
        showDetail(data){
            this.$router.push({path: "/drools-version/view-group/"+data.groupIdentify+"/"+data.groupVersion+"/audit"})
        },
      search () {
        this.paginations.pageIndex = 1
        this.getList()
      },
      getList () {
        this.paginations.total = 0
        this.tableData = []
        this.$store.dispatch('loading/CHANGE_LOADING', true)
        this.searchParams.pageNumber = this.paginations.pageIndex
        this.searchParams.pageSize = this.paginations.pageSize
        rulePage(this.searchParams).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.data.resultCode == constant.SUCCESS && res.data.data && res.data.data.list.length) {
            this.paginations.total = res.data.data.total
            this.tableData = res.data.data.list
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
        })
      },
      saveAudit () {
        this.$store.dispatch('loading/CHANGE_LOADING', true)
        ruleAudit(this.auditReq).then(res => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
          if (res.data.resultCode == constant.SUCCESS) {
            this.auditVisible = false
            this.getList()
          }
        }).catch(err => {
          this.$store.dispatch('loading/CHANGE_LOADING', false)
        })
      },
      audit(row){
        this.auditReq.auditStatus = '2'
        this.auditReq.auditMsg = '通过'
        this.auditReq.identify = row.groupIdentify
        this.auditReq.version = row.groupVersion
        this.auditVisible = true
      },
      compareVersion () {
        constant.clearTag(this)
        this.$router.push({name: constant.routerName.ruleGroupCompare})
      },
      // 清除查询条件
      resetSearch () {
        this.searchParams.groupName = ''
        this.searchParams.publishBegDate = ''
        this.searchParams.publishEndDate = ''
        this.searchParams.auditStatus = ''
        this.searchParams.publishUser = ''
        this.searchParams.groupIdentify = ''
      },
      // 每页多少条切换
      handleSizeChange(pageSize) {
        this.paginations.pageSize = pageSize;
        this.getList();
      },
      // 上下分页
      handleCurrentChange(page) {
        this.paginations.pageIndex = page;
        this.getList();
      },
      dateFormat(row,column){
        return constant.dateFormat('YYYY-mm-dd HH:MM:SS', row.lastUpdateTime)
      },
      auditStatusFormat (row,column){
        return constant.getLabel(row.auditStatus, constant.auditStatus)
      },
      auditChangeHandler(value) {
        // console.log('改变之后的值是:' + value)
        if (value == '2'){
          this.auditReq.auditMsg = '通过'
        }
        if (value == '3'){
          this.auditReq.auditMsg = '拒绝'
        }
      }
    },
    watch: {},
    computed: {}

  }
</script>

<style lang="less" scoped>
  .fillcontain {
    padding-bottom: 0;

    .fastQuery {
      padding: 15px 20px 10px 20px;
      background: #fff;
      border-bottom: 1px solid #e1e1e1;

      .fastQuery_title {
        color: #666;
        padding: 6px 0px;
      }

      .fastQuery_item {
        margin: 0 10px;
      }

      .item_default {
        .el-button {
          color: #409EFF !important;
          border-color: #c6e2ff !important;
          background-color: #ecf5ff !important;
        }

      }

      .moreCondition {
        color: #68a3fc;
        cursor: pointer;
        padding: 6px 0px;

        .el-icon-d-arrow-right {
          transform: rotate(90deg);
        }

        .el-icon-d-arrow-left {
          transform: rotate(-90deg);
        }
      }
    }
  }

  .contain {
    background: #fff;
    padding: 10px;
    margin-bottom: 20px;
  }

  .pagination {
    padding: 10px 20px;
    text-align: right;
  }

  .operationIcon {
    // padding: 12px;
    border: 1px solid #e5e5e5;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: inline-block;
    cursor: pointer;
    box-shadow: 0 0 3px #f9f9f9;

    .svg-icon {
      font-size: 14px;
      fill: #68a3fc;
    }
  }

  .search_container {
    padding: 20px 20px 0 20px;
  }

  .el-dropdown {
    vertical-align: top;
  }

  .el-dropdown + .el-dropdown {
    margin-left: 15px;
  }

  .el-icon-arrow-down {
    font-size: 12px;
  }
</style>



